<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div th:replace="/common/header"></div>
<div id="Content">
<div id="BackLink">
    <a href="/Main/enter">
        Return to Main Menu
    </a></div>

<div id="Catalog">
    <style type="text/css">

        table {
            width: 700px;
            padding: 0;
            margin: 0;
        }

        caption {
            padding: 0 0 5px 0;
            width: 700px;
            font: italic 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            text-align: right;
        }

        th {
            font: bold 20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #f5ba11;
            border-right: 1px solid #bfa986;
            border-bottom: 1px solid #bfa986;
            border-top: 1px solid #bfa986;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: left;
            padding: 6px 6px 6px 12px;
            background: #eee0c5 no-repeat;
        }

        td {
            border-right: 1px solid #bfa986;
            border-bottom: 1px solid #bfa986;
            background: #fff;
            font-size:16px;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
        }
    </style>
    <table>
        <tr>
            <th>&nbsp;</th>
            <th>Product ID</th>
            <th>Name</th>
        </tr>
            <tr th:each="product : ${productList}">
                <td>
                    <a th:href="${'/category/ViewProduct?productId='}+${product.productId}">
                        <th:block th:utext="${product.descn}" />
                        </a></td>
                <td><b>
                    <a th:href="${'/category/ViewProduct?productId='}+${product.productId}">
                        <font color="BLACK">
                            <th:block th:text="${product.productId}" />
                             </font>
                    </a></b></td>
                <td> <th:block th:text="${product.name}" />
                    </td>
            </tr>
        <tr>
            <td></td>
        </tr>

    </table>

</div>
</div>
<div th:replace="/common/footer"></div>
</body>
</html>